<script setup lang='ts'>
import{ recognitionService } from '@/api/model'
import { getBirdInfoByNameService } from '@/api/birds'
import { useTokenStore } from '@/stores/token'
import { useRouter } from 'vue-router';
const router = useRouter();

const toBirdDetail = (birdId: number) => {
    router.push('/home/birdDetail/' + birdId);
};

const tokenStore = useTokenStore()

interface RecognitionResult {
    no: number
    prediction: number
    specie: string
}

interface Bird {
    id: number;
    createdAt: string;
    updatedAt: string;
    morphologyAndFeatures: string;
    name: string;
    habits: string;
    species: string;
    imageUrl: string;
    soundUrl: string;
    description: string;
    growthAndDistribution: string;
}

//用于存放识别结果的对象
const recognitionResult = ref<RecognitionResult>(
    {
        no: 0,
        prediction: 0,
        specie: 'default'
    }
)

//用于存放鸟类信息的对象
const birdInfo = ref<Bird>()

//调用后台接口上传文件进行识别
// const recognition = async (file) => {
    
//     let result = await recognitionService(file)

//     if(result.code == 200) {
//         recognitionResult.value = result.data
//     }else{
//         ElMessage.error(result.msg ? result.msg : '识别鸟类失败');
//     }

// }

//调用后台接口获取鸟类信息
const getBirdInfoByName = async (birdName) => {

    let result = await getBirdInfoByNameService(birdName)

    if(result.code == 200) {
        birdInfo.value = result.data
    }else{
        ElMessage.error(result.msg ? result.msg : '获取鸟类信息失败');
    }

}


//上传成功的回调
const handleUploadSoundSuccess = (response, file, fileList) => {

    //识别成功，将识别结果赋值给recognitionResult
    if(response.code == 200) {

        ElMessage.success('识别成功');
        recognitionResult.value = response.data

        //调用后台接口获取鸟类信息
        if(recognitionResult.value.specie != "default") {
            getBirdInfoByName(recognitionResult.value.specie)
        }

    }else{

        ElMessage.error(response.msg ? response.msg : '识别失败');

    }
    
    

}

//跳转到对应鸟类页面

</script>

<template>
    <div class="container">
        <el-upload 
        class="upload-demo" drag 
        action="/api/recognize-audio"
        :limit="1"
        :headers="{'token': tokenStore.token}"
        :on-success="handleUploadSoundSuccess"
            multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    上传鸟类音频文件进行分类（文件大小不超过1048576 bytes）
                </div>
            </template>
        </el-upload>
        <div class="result" v-if=" recognitionResult.specie != 'default' ">
            <div>识别结果：{{  recognitionResult.specie }}</div>
            <div class="result-btn"v-if=" birdInfo ">
                <el-button type="primary" @click="toBirdDetail(birdInfo.id)">点击查看详情</el-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    margin: 10px;
    padding: 10px;
    flex-direction: column;
}
.result {
    margin: 10px;
}
.result-btn {
    margin: 10px;
}
</style>